<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="clickLeft"> </van-nav-bar>
    <h3 class="msg">短信登录</h3>
    <!-- 表单 -->
    <van-form class="form" ref="form">
      <van-field
        placeholder="请输入手机号"
        :rules="rules.mobile"
        v-model="form.mobile"
      ></van-field>
      <van-field
        placeholder="请输入验证码"
        :rules="rules.code"
        v-model="form.code"
      >
        <template #button>
          <div class="code">
            发送验证码
          </div>
        </template>
      </van-field>
      <van-button class="submit" @click="btn">登录</van-button>
    </van-form>
  </div>
</template>

<script>
import { authorizationsnels } from '@/api/login.js'
export default {
  data () {
    return {
      form: {
        mobile: '13200000000',
        code: '246810'
      },
      rules: {
        mobile: [{ required: true, message: '必填', trigger: 'onChange' }],
        code: [{ required: true, message: '必填', trigger: 'onChange' }]
      }
    }
  },
  methods: {
    clickLeft () {},
    // 全局验证
    btn () {
      this.$refs.form.validate().then(async () => {
        const res = await authorizationsnels(this.form)
        // 存储token
        this.$store.commit('user/setToken', res.data.token)
        // 跳转
        this.$router.push('/home')
        console.log(res)
        // this.$toast.success('登陆成功')
      })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar .van-icon {
  color: #999;
}
.login .form {
  padding: 15px;
}
.msg {
  font-size: 18px;
  font-weight: normal;
  padding-left: 25px;
  margin-top: 20px;
}
.code {
  font-size: 14px;
  color: #666;
}
.submit {
  width: 100%;
  background-color: #ff5349;
  margin-top: 30px;
  color: white;
}
</style>
